<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/public/css :: common_css(~{::title},~{::link})">
    <title>Trend - KafkaEagle</title>
    <link th:href="@{/media/css/plugins/datatimepicker/daterangepicker.css}" rel="stylesheet"/>
</head>
<style>
    .box {
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;
        margin-top: 30px;
        overflow: hidden;
    }

    .box .left {
        font-size: 36px;
        float: left
    }

    .box .left small {
        font-size: 24px;
        color: #777
    }

    .box .right {
        float: right;
        width: 230px;
        margin-top: 20px;
        background: #fff;
        cursor: pointer;
        padding: 5px 10px;
        border: 1px solid #ccc;
    }

    .chartzkdiv {
        width: 100%;
        height: 300px;
    }
</style>
<body>
<nav th:replace="/public/navbar :: common_navbar"></nav>
	<div id="wrapper">
		<div id="page-wrapper">
			<div class="row">
				<div class="col-lg-12">
					<div class="box">
					  <p   class="left">
							Zookeeper Monitor <small>details</small>
						</p>
						<div id="reportrange"
						class="right">
							<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
							<span></span> <b class="caret"></b>
						</div>
					</div>
				</div>
				<!-- /.col-lg-12 -->
			</div>
			<!-- /.row -->
			<div class="row">
				<div class="col-lg-12">
					<div class="alert alert-info alert-dismissable">
						<button type="button" class="close" data-dismiss="alert"
							aria-hidden="true">×</button>
						<i class="fa fa-info-circle"></i> <strong>Monitor
							Zookeeper transmission, receive packets, connection numbers, file
							open number, respond to client request processing time and other
							performance monitoring .</strong>
					</div>
				</div>
			</div>

			<!-- /.row -->
			<div class="row">
				<div class="col-lg-12">
					<div class="panel panel-default">
						<div class="panel-heading">
							<i class="fa fa-bar-chart-o fa-fw"></i> <strong>Zookeeper
								Send Packets</strong>
							<div class="pull-right"></div>
						</div>
						<!-- /.panel-heading -->
						<div class="panel-body">
							<div id="zk_send_packets" class="chartzkdiv"></div>
						</div>
						<!-- /.panel-body -->
					</div>
				</div>
				<!-- /.col-lg-4 -->
				<div class="col-lg-12">
					<div class="panel panel-default">
						<div class="panel-heading">
							<i class="fa fa-bar-chart-o fa-fw"></i> <strong>Zookeeper
								Received Packets</strong>
							<div class="pull-right"></div>
						</div>
						<!-- /.panel-heading -->
						<div class="panel-body">
							<div id="zk_recevied_packets" class="chartzkdiv"></div>
						</div>
						<!-- /.panel-body -->
					</div>
				</div>
				<!-- /.col-lg-4 -->
				<div class="col-lg-12">
					<div class="panel panel-default">
						<div class="panel-heading">
							<i class="fa fa-bar-chart-o fa-fw"></i> <strong>
								Zookeeper Alive Connections </strong>
							<div class="pull-right"></div>
						</div>
						<!-- /.panel-heading -->
						<div class="panel-body">
							<div id="zk_alives_connections" class="chartzkdiv"></div>
						</div>
						<!-- /.panel-body -->
					</div>
				</div>
				<!-- /.col-lg-4 -->
				<div class="col-lg-12">
					<div class="panel panel-default">
						<div class="panel-heading">
							<i class="fa fa-bar-chart-o fa-fw"></i> <strong>
								Zookeeper Queue Requests </strong>
							<div class="pull-right"></div>
						</div>
						<!-- /.panel-heading -->
						<div class="panel-body">
                            <div id="zk_queue_requests" class="chartzkdiv"></div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                </div>
                <!-- /.col-lg-4 -->
            </div>
        </div>
        <!-- /#page-wrapper -->
    </div>
<div th:replace="/public/script :: common_js(~{::script})">
    <script th:src="@{/media/js/main/metrics/zk.js}" type="text/javascript"></script>
    <script th:src="@{/media/js/plugins/echart/echarts.min.js}" type="text/javascript"></script>
    <script th:src="@{/media/js/plugins/echart/macarons.js}" type="text/javascript"></script>
    <script th:src="@{/media/js/plugins/datatimepicker/moment.min.js}" type="text/javascript"></script>
    <script th:src="@{/media/js/plugins/datatimepicker/daterangepicker.js}" type="text/javascript"></script>
</div>
</body>
</html>
